<template>
  <div class="analysis-container">
    <div class="chart-row">
      <el-card class="chart-card" shadow="hover">
        <div ref="arpuChart" style="width: 100%; height: 400px"></div>
      </el-card>
      <el-card class="chart-card" shadow="hover">
        <div ref="arppuChart" style="width: 100%; height: 400px"></div>
      </el-card>
    </div>

    <div class="chart-row">
      <el-card class="chart-card" shadow="hover">
        <div ref="orderRateChart" style="width: 100%; height: 400px"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="js">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts/core';
import { GridComponent, MarkPointComponent, TitleComponent,ToolboxComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { getArpuDaily, getArppuDaily, getOrderRateDaily } from '@/api';

echarts.use([GridComponent, ToolboxComponent, LineChart, CanvasRenderer, UniversalTransition, MarkPointComponent, TitleComponent]);

const arpuChart = ref(null);
const arppuChart = ref(null);
const orderRateChart = ref(null);
const router = useRouter();

onMounted(async () => {
  // 初始化图表实例
  const arpuInstance = echarts.init(arpuChart.value);
  const arppuInstance = echarts.init(arppuChart.value);
  const orderRateInstance = echarts.init(orderRateChart.value);

  // ARPU 图表配置
  const arpuOptions = {
    title: {
      text: '基于天级别的 ARPU 分析',
      left: 'center'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'line',
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
          ]
        },
      }
    ]
  };

  // ARPPU 图表配置
  const arppuOptions = {
    title: {
      text: '基于天级别的 ARPPU 分析',
      left: 'center'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'line',
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
          ]
        },
      }
    ]
  };

  // 订单转化率图表配置
  const orderRateOptions = {
    title: {
      text: '基于天级别的下单率分析',
      left: 'center'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        data: [],
        type: 'line',
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
          ]
        },
      }
    ]
  };

  // 获取并设置 ARPU 数据
  const arpuData = await getArpuDaily(router);
  if (arpuData) {
    arpuOptions.xAxis.data = arpuData.map(item => {
      const date = new Date(item.date);
      return `${date.getMonth() + 1}-${date.getDate()}`;
    });
    arpuOptions.series[0].data = arpuData.map(item => item.arpuCount);
  }
  arpuOptions && arpuInstance.setOption(arpuOptions);

  // 获取并设置 ARPPU 数据
  const arppuData = await getArppuDaily(router);
  if (arppuData) {
    arppuOptions.xAxis.data = arppuData.map(item => {
      const date = new Date(item.date);
      return `${date.getMonth() + 1}-${date.getDate()}`;
    });
    arppuOptions.series[0].data = arppuData.map(item => item.arppuCount);
  }
  arppuOptions && arppuInstance.setOption(arppuOptions);

  // 获取并设置订单转化率数据
  const orderRateData = await getOrderRateDaily(router);
  if (orderRateData) {
    orderRateOptions.xAxis.data = orderRateData.map(item => {
      const date = new Date(item.date);
      return `${date.getMonth() + 1}-${date.getDate()}`;
    });
    orderRateOptions.series[0].data = orderRateData.map(item => item.orderRate);
  }
  orderRateOptions && orderRateInstance.setOption(orderRateOptions);
});
</script>

<style scoped>
.analysis-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.chart-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.chart-card {
  flex: 1;
  min-height: 400px;
}
</style>
